import { Component } from 'react';

import { Datetime,Field,Group,Boxs } from 'saltui';
const { HBox, Box } = Boxs;


export default class PageHome extends Component {



  constructor(props) {
    super(props);
    var label = props.label;

    this.state = {
      label:label
    };
    this.datetimeProps = {
      locale: 'zh-cn',
    };
  }


  handleChange(value,field) {
    debugger;
    this.setState({
      [field]:value
    });
    this.props.onSelect(value);
  }


  showSlot(id) {
    this[id].show();
  }


  render() {
    const t = this;
    let value1 = {value:this.props.value[0]};
    let value2 = {value:this.props.value[1]};
    return (
       <div className="page-add">
          <Datetime
            {...this.datetimeProps}
            slotRef={s => t.slot1 = s}
            title="时间选择"
            value={value1}
            columns={Datetime.YMD}
            onConfirm={(value) => { this.handleChange(value,'value1'); }}
          />
          <Datetime
            {...this.datetimeProps}
            slotRef={s => t.slot2 = s}
            title="时间选择"
            value={value2}
            columns={Datetime.YMD}
            onConfirm={(value) => { this.handleChange(value,'value2'); }}
          />
           <div className="t-field-layout-v-label t-FS16 required">{t.state.label}</div>

          <Group.List className="no-top-border">

            <HBox>
              <Box flex={1}>
              <Field>
                  <div onClick={() => {
                    t.showSlot('slot1');
                  }} ref="timeShowStart" className="t-FL">{this.props.value[0]}</div>
                </Field>
              </Box>
              <Box className="t-LH46 t-FCc">——</Box>
              <Box flex={1}>
              <Field>
                  <div onClick={() => {
                    t.showSlot('slot2');
                  }} ref="timeShowEnd" className="t-FR">{this.props.value[1]}</div>
                </Field>
              </Box>
            </HBox>


          </Group.List>





      </div>
    );
  }
}

